<template>
  <div class="vs-violation-count">
    <VsModuleTitle name="各区县违法统计">
      <div class="title-page">
        <!--        <span-->
        <!--          v-for="item in activeList"-->
        <!--          :key="item"-->
        <!--          :class="[-->
        <!--            'title-page-item',-->
        <!--            activeType == item ? 'title-page-active' : ''-->
        <!--          ]"-->
        <!--          @click.stop="handleClick(item)"-->
        <!--          @mouseleave.stop="mouseleaveSpan"-->
        <!--          @mouseover.stop="timer = null"-->
        <!--        ></span>-->
      </div>
    </VsModuleTitle>
    <div class="vs-violation-count__content">
      <ViolationTable :data-list="dataList" @on-back="onBackShowInfo" />
      <div class="violation-data-go">
        <svg-icon
          name="vc-xiangxia"
          class-name="violation-data-go__one"
          color="rgba(193, 230, 26, 0.3)"
        />
        <svg-icon
          name="vc-xiangxia"
          class-name="violation-data-go__two"
          color="#C1E61A"
        />
      </div>
      <ViolationDetail :detail-info="detailInfo" />
    </div>
  </div>
</template>

<script>
import VsModuleTitle from "../ModuleTitle/index";
import ViolationTable from "./components/violation-table";
import ViolationDetail from "./components/violation-detail";
import { randomNum } from "../../scripts/utils.js";
export default {
  name: "VsViolationCount",
  components: { ViolationDetail, ViolationTable, VsModuleTitle },
  filters: {},
  props: {},
  data() {
    return {
      detailInfo: [],
      timer: null,
      dataList: [
        { area: "万州区", count: 1117, houseNum: 2494, id: "160" },
        { area: "涪陵区", count: 5924, houseNum: 199, id: "2182" },
        { area: "渝中区", count: 5333, houseNum: 205, id: "3306" },
        { area: "大渡口区", count: 1820, houseNum: 1108, id: "453" },
        { area: "江北区", count: 5808, houseNum: 1077, id: "5214" },
        { area: "沙坪坝区", count: 2034, houseNum: 239, id: "682" },
        { area: "九龙坡区", count: 4696, houseNum: 351, id: "7254" },
        { area: "南岸区", count: 5631, houseNum: 352, id: "8154" },
        { area: "北碚区", count: 9542, houseNum: 2211, id: "9408" },
        { area: "綦江区", count: 6839, houseNum: 2407, id: "10467" },
        { area: "大足区", count: 7643, houseNum: 2363, id: "11212" },
        { area: "渝北区", count: 1774, houseNum: 2864, id: "12487" },
        { area: "巴南区", count: 6065, houseNum: 2022, id: "13491" },
        { area: "黔江区", count: 5491, houseNum: 1837, id: "14384" },
        { area: "长寿区", count: 3411, houseNum: 1863, id: "15175" },
        { area: "江津区", count: 7535, houseNum: 1041, id: "16169" },
        { area: "合川区", count: 6251, houseNum: 1514, id: "17339" },
        { area: "永川区", count: 5874, houseNum: 2874, id: "18360" },
        { area: "南川区", count: 3887, houseNum: 2758, id: "19141" },
        { area: "璧山区", count: 2621, houseNum: 290, id: "20169" },
        { area: "铜梁区", count: 9286, houseNum: 1940, id: "21239" },
        { area: "潼南区", count: 6556, houseNum: 1340, id: "22116" },
        { area: "荣昌区", count: 8058, houseNum: 1341, id: "23468" },
        { area: "开州区", count: 5338, houseNum: 1089, id: "24150" },
        { area: "梁平区", count: 9637, houseNum: 2549, id: "25406" },
        { area: "武隆区", count: 3720, houseNum: 2122, id: "26288" },
        { area: "城口县", count: 9068, houseNum: 1506, id: "27366" },
        { area: "丰都县", count: 7619, houseNum: 632, id: "28257" },
        { area: "垫江县", count: 1833, houseNum: 1825, id: "29288" },
        { area: "忠县", count: 5690, houseNum: 874, id: "30248" },
        { area: "云阳县", count: 3747, houseNum: 2506, id: "31416" },
        { area: "奉节县", count: 9198, houseNum: 667, id: "3239" },
        { area: "巫山县", count: 2299, houseNum: 1156, id: "3399" },
        { area: "巫溪县", count: 2269, houseNum: 1607, id: "3432" },
        {
          area: "石柱土家族自治县",
          count: 8781,
          houseNum: 1927,
          id: "35383"
        },
        {
          area: "秀山土家族苗族自治县",
          count: 8396,
          houseNum: 2385,
          id: "36345"
        },
        {
          area: "酉阳土家族苗族自治县",
          count: 2762,
          houseNum: 2318,
          id: "37299"
        },
        {
          area: "彭水苗族土家族自治县",
          count: 5530,
          houseNum: 1883,
          id: "38126"
        },
        { area: "万盛经开区", count: 5252, houseNum: 2374, id: "39186" },
        { area: "高新区", count: 3754, houseNum: 2690, id: "40233" }
      ]
    };
  },

  methods: {
    onBackShowInfo(dataId) {
      const { dataList } = this;
      let _detailInfo = dataList.find(item => item.id === dataId);
      _detailInfo.dropOut = randomNum(100, _detailInfo.houseNum);
      _detailInfo.paidUse = randomNum(100, _detailInfo.houseNum);
      _detailInfo.paidUseTwo = randomNum(100, _detailInfo.houseNum);
      _detailInfo.tearDown = randomNum(100, _detailInfo.houseNum);
      this.detailInfo = _detailInfo;
    }
  }
};
</script>

<style lang="less">
.vs-violation-count {
  margin-top: 10px !important;

  &__content {
    background-color: rgba(12, 26, 58, 0.4);
    padding: 0 10px 15px;
    box-sizing: border-box;
  }

  .title-page {
    display: flex;
    align-items: center;
    .title-page-item {
      display: inline-block;
      width: 5px;
      height: 5px;
      border-radius: 3px;
      background-color: rgba(167, 167, 167, 0.4);
      margin-left: 15px;
      cursor: pointer;
    }
    .title-page-active {
      background-color: #ffffff;
    }
  }
  .violation-data-go {
    position: relative;
    text-align: center;
    margin: 10px 0 5px;
  }
  .violation-data-go__one {
    position: absolute;
    top: 0;
    -webkit-animation: vs-color-change 1s infinite;
    -moz-animation: vs-color-change 1s infinite;
    -o-animation: vs-color-change 1s infinite;
    -ms-animation: vs-color-change 1s infinite;
    animation: vs-color-change 1s infinite;
  }
  .violation-data-go__two {
    -webkit-animation: vs-color-change-reverse 1s infinite;
    -moz-animation: vs-color-change-reverse 1s infinite;
    -o-animation: vs-color-change-reverse 1s infinite;
    -ms-animation: vs-color-change-reverse 1s infinite;
    animation: vs-color-change-reverse 1s infinite;
  }
}
</style>
